$(function () {
    var user = getCookie("username");
    $(".tobs a").click(function () {
        $(this).css({
            borderRight: "1px solid #e5e5e5",
            borderBottom: "none",
            borderLeft: "1px solid #e5e5e5",
            borderTop: "3px solid #be0f34",
            color: " #000"
        }).siblings().css({
            borderRight: "none",
            borderBottom: "1px solid #e5e5e5",
            borderLeft: "none",
            borderTop: "none",
            color: "#8b8b8b"
        })
    });
    $(".act").click(function () {
        $.get("./goodsAndShoppingCart/getGoodsList.php", { "typeId": "001" }, function (data) {
            // console.log(data);
            Title(data);
            get();
        }, "json");
    });
    $(".act1").click(function () {
        $.get("./goodsAndShoppingCart/getGoodsList.php", { "typeId": "002" }, function (data) {
            // console.log(data);
            Title(data);
            get();
        }, "json");
    });
    $(".act2").click(function () {
        $.get("./goodsAndShoppingCart/getGoodsList.php", { "typeId": "003" }, function (data) {
            // console.log(data);
            Title(data);
            get();
        }, "json");
    });
    // 单品
    $.get("./goodsAndShoppingCart/getGoodsList.php", { "typeId": "001" }, function (data) {
        Title(data);
        get();
        $(".p").click(function(){
            var id = $(this).children(".d").text();
            if (user !='') {
                $.post("./goodsAndShoppingCart/addShoppingCart.php", {
                    "vipName":user,"goodsId":id,"goodsCount":"5"
                }, function () {
                    alert("添加成功");
                });
            }else{
                alert("添加失败！请先登录");
                location.href="login.html";
                return false;
            }
        })
    }, "json");
    function Title(data) {
        let str = '';
        let arr = [];
        for (let i = 0; i < data.length; i++) {
            str = `<li><a href="detail.html?id=${data[i].goodsId}">
                            <div class="imgs">
                                <img src="${data[i].goodsImg}"
                                    alt="${data[i].goodsName}">
                             <span class="p">加入购物车<span class ="d" style="display:none;">${data[i].goodsId}</span></span>
                            </div>
                            <h5>${data[i].goodsName}</h5>
                            <p>￥${data[i].goodsPrice}</p>
                </a></li>`;
            arr += str;
        }
        $(".box-good").prepend(arr);
    }
    
    // 分页
    function get() {
        var number = $(".box-good li").length;
        // 加
        var oIndex = 0;
        $("#btn-next").click(function () {
            console.log($("#btn-next"));
            // console.log(oIndex)
            if (oIndex < parseInt(number / 4) - 1) {
                oIndex++;
                $(".box-good").css({
                    left: -1200 * oIndex,
                })
            } else {
                oIndex = number / 4
            }
            span();
        })
        // 减
        $("#btn-previous").click(function () {
            // console.log(oIndex)
            if (oIndex > 0) {
                oIndex--;
                $(".box-good").css({
                    left: -1200 * oIndex,
                })
            } else {
                oIndex = 0
            }
            span();
        })
        function span() {
            // console.log($(".btn span"));
            $(".box-wrap span").eq(oIndex).css({
                "width": 20,
                backgroundColor: "#000"
            }).siblings().css({
                "width": 15,
                backgroundColor: "#8b8b8b"
            })
        }
        $(".box-good li").mouseenter(function () {
            $(this).find(".p").slideDown();
        });
        $(".box-good li").mouseleave(function () {
            $(this).find(".p").slideUp();
        })
    }
})
